<template>
  <view class="detail-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">资讯详情</view>
      <view class="share-btn" @click="shareArticle">
        <uni-icons type="redo" size="24" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- 文章内容 -->
    <scroll-view scroll-y class="article-scroll">
      <!-- 文章标题 -->
      <view class="article-header">
        <view class="article-title">{{ articleData.title }}</view>
        <view class="article-info">
          <text class="article-category">{{ articleData.category }}</text>
          <text class="article-date">{{ articleData.date }}</text>
          <text class="article-read">{{ articleData.readCount }}分钟阅读</text>
        </view>
      </view>
      
      <!-- 文章封面图 -->
      <view class="article-cover">
        <image :src="articleData.image" mode="widthFix" class="cover-image"></image>
      </view>
      
      <!-- 文章内容 -->
      <view class="article-content">
        <rich-text :nodes="articleData.content"></rich-text>
      </view>
      
      <!-- 相关推荐 -->
      <view class="related-section">
        <view class="section-title">相关推荐</view>
        <view class="related-list">
          <view class="related-item" v-for="(item, index) in relatedArticles" :key="index" @click="goToRelated(item)">
            <image :src="item.image" mode="aspectFill" class="related-image"></image>
            <view class="related-title">{{ item.title }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-btn" @click="toggleLike">
        <uni-icons :type="isLiked ? 'heart-filled' : 'heart'" size="24" :color="isLiked ? '#ff7a45' : '#999'"></uni-icons>
        <text :class="{ active: isLiked }">{{ likeCount }}</text>
      </view>
      <view class="action-btn" @click="toggleCollect">
        <uni-icons :type="isCollected ? 'star-filled' : 'star'" size="24" :color="isCollected ? '#ff9500' : '#999'"></uni-icons>
        <text :class="{ active: isCollected }">收藏</text>
      </view>
      <view class="action-btn" @click="showComments">
        <uni-icons type="chat" size="24" color="#999"></uni-icons>
        <text>评论</text>
      </view>
      <button class="share-action" open-type="share">
        <uni-icons type="redo" size="24" color="#999"></uni-icons>
        <text>分享</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 文章数据
const articleData = ref({
  id: '1',
  title: '家居清洁小技巧: 如何有效去除顽固污渍',
  category: '家居清洁',
  date: '2023-06-15',
  readCount: '3',
  image: '/static/images/news1.jpg',
  content: `
    <div style="font-size: 28rpx; line-height: 1.8; color: #333;">
      <p>家居清洁是每个家庭必须面对的日常任务，而顽固污渍往往是最令人头疼的问题之一。无论是厨房油污、浴室水垢，还是地毯上的陈年污渍，都需要正确的方法和工具才能有效清除。</p>
      
      <h3 style="font-size: 32rpx; font-weight: bold; margin: 30rpx 0 20rpx;">厨房油污清洁技巧</h3>
      <p>厨房是家中油污最集中的区域，尤其是灶台周围和抽油烟机。对于这些区域的清洁，可以尝试以下方法：</p>
      <p>1. <strong>白醋+小苏打溶液</strong>：将等量的白醋和温水混合，加入适量小苏打，喷洒在油污表面，静置10-15分钟后擦拭。</p>
      <p>2. <strong>柠檬汁</strong>：柠檬中的天然酸性成分可以有效分解油脂。将柠檬汁直接涂抹在油污处，静置片刻后擦拭。</p>
      <p>3. <strong>专业厨房清洁剂</strong>：市面上有许多专门针对厨房油污的清洁产品，使用时请务必按照说明书操作，并做好手部保护。</p>
      
      <h3 style="font-size: 32rpx; font-weight: bold; margin: 30rpx 0 20rpx;">浴室水垢清除方法</h3>
      <p>浴室中的水垢主要来自于水中的矿物质沉积，特别是在水龙头、淋浴喷头和玻璃门上最为明显。</p>
      <p>1. <strong>白醋溶液</strong>：用等量的白醋和水混合，喷洒在水垢处，静置30分钟后用软布擦拭。</p>
      <p>2. <strong>柠檬</strong>：将柠檬切片，直接擦拭水垢区域，或将柠檬汁混合水后喷洒使用。</p>
      <p>3. <strong>专业水垢清除剂</strong>：对于顽固水垢，可以使用市售的专业清洁产品，但使用后需要彻底冲洗。</p>
      
      <h3 style="font-size: 32rpx; font-weight: bold; margin: 30rpx 0 20rpx;">地毯污渍处理</h3>
      <p>地毯上的污渍种类繁多，从食物饮料到宠物污渍，每种污渍都需要特定的处理方法。</p>
      <p>1. <strong>速干原则</strong>：无论是什么污渍，第一步都是尽快用纸巾或干净布料吸干液体，避免渗透到地毯深层。</p>
      <p>2. <strong>小苏打溶液</strong>：对于大多数污渍，可以用小苏打和温水制成糊状，涂抹在污渍处，干燥后用吸尘器清理。</p>
      <p>3. <strong>专业地毯清洁机</strong>：对于大面积或顽固污渍，可以考虑租用或购买专业地毯清洁机。</p>
      
      <h3 style="font-size: 32rpx; font-weight: bold; margin: 30rpx 0 20rpx;">日常清洁小贴士</h3>
      <p>1. <strong>定期清洁</strong>：不要等到污渍变得顽固再处理，定期的轻度清洁可以防止污渍积累。</p>
      <p>2. <strong>使用适当工具</strong>：不同的表面需要不同的清洁工具，使用合适的工具可以提高清洁效率并保护表面。</p>
      <p>3. <strong>注意安全</strong>：混合不同的清洁剂可能产生有害气体，请务必单独使用每种清洁产品，并保持良好通风。</p>
      
      <p>通过掌握这些清洁技巧，您可以更轻松地应对家中的各种顽固污渍，让家居环境保持清洁舒适。</p>
    </div>
  `
});

// 相关文章
const relatedArticles = ref([
  {
    id: '2',
    title: '夏季家居防潮指南: 让您的家远离湿气困扰',
    image: '/static/images/news2.jpg'
  },
  {
    id: '3',
    title: '空调使用与保养全指南: 延长使用寿命的秘诀',
    image: '/static/images/news3.jpg'
  },
  {
    id: '6',
    title: '室内空气质量改善: 打造健康呼吸环境',
    image: '/static/images/health3.jpg'
  }
]);

// 交互状态
const isLiked = ref(false);
const isCollected = ref(false);
const likeCount = ref(128);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 分享文章
const shareArticle = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    title: articleData.value.title,
    summary: '分享一篇关于家居清洁的好文章',
    imageUrl: articleData.value.image,
    success: function(res) {
      console.log('分享成功：', res);
    },
    fail: function(err) {
      console.log('分享失败：', err);
    }
  });
};

// 点赞
const toggleLike = () => {
  isLiked.value = !isLiked.value;
  if (isLiked.value) {
    likeCount.value++;
  } else {
    likeCount.value--;
  }
};

// 收藏
const toggleCollect = () => {
  isCollected.value = !isCollected.value;
  
  if (isCollected.value) {
    uni.showToast({
      title: '收藏成功',
      icon: 'success'
    });
  } else {
    uni.showToast({
      title: '已取消收藏',
      icon: 'none'
    });
  }
};

// 显示评论
const showComments = () => {
  uni.showToast({
    title: '评论功能开发中',
    icon: 'none'
  });
};

// 跳转到相关文章
const goToRelated = (item) => {
  uni.navigateTo({
    url: `/pages/advice/detail?id=${item.id}`
  });
};

onMounted(() => {
  // 获取文章ID
  const eventChannel = getOpenerEventChannel();
  const articleId = eventChannel ? eventChannel.articleId : null;
  
  // 根据ID获取文章详情
  getArticleDetail(articleId);
  
  // 增加阅读量
  increaseReadCount(articleId);
});

// 获取文章详情
const getArticleDetail = (id) => {
  // 实际项目中应该调用API获取数据
  console.log('获取文章ID:', id);
  
  // 这里使用的是预设的数据
};

// 增加阅读量
const increaseReadCount = (id) => {
  // 实际项目中应该调用API增加阅读量
  console.log('增加文章阅读量:', id);
};
</script>

<style lang="scss" scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn, .share-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
  }
}

// 文章滚动区域
.article-scroll {
  flex: 1;
  overflow: hidden;
}

// 文章标题区域
.article-header {
  padding: 30rpx;
  
  .article-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20rpx;
  }
  
  .article-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .article-category, .article-date, .article-read {
      font-size: 24rpx;
      color: #999;
      margin-right: 20rpx;
    }
    
    .article-category {
      background-color: #f5f5f5;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
    }
  }
}

// 文章封面图
.article-cover {
  width: 100%;
  
  .cover-image {
    width: 100%;
  }
}

// 文章内容
.article-content {
  padding: 30rpx;
}

// 相关推荐
.related-section {
  padding: 30rpx;
  border-top: 20rpx solid #f5f5f5;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background-color: #ff7a45;
      border-radius: 3rpx;
    }
  }
  
  .related-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;
    
    .related-item {
      width: calc(33.33% - 20rpx);
      margin: 0 10rpx 20rpx;
      
      .related-image {
        width: 100%;
        height: 160rpx;
        border-radius: 8rpx;
        margin-bottom: 10rpx;
      }
      
      .related-title {
        font-size: 26rpx;
        color: #333;
        line-height: 1.4;
        // 最多显示两行
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}

// 底部操作栏
.bottom-bar {
  display: flex;
  align-items: center;
  height: 100rpx;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 0 30rpx;
  
  .action-btn, .share-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    line-height: normal;
    
    &::after {
      border: none;
    }
    
    text {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
      
      &.active {
        color: #ff7a45;
      }
    }
  }
}

// 适配底部安全区
@supports (bottom: constant(safe-area-inset-bottom)) {
  .bottom-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    height: calc(100rpx + constant(safe-area-inset-bottom));
  }
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .bottom-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100rpx + env(safe-area-inset-bottom));
  }
}
</style>